<template>
  <div class="index">
    <a-button type="primary" class="mt-5" @click="jsonPrint">批量打印二维码</a-button>
    <div class="qr-code-list" id="qrCodeList" v-show="showQrCodeList">
      <div class="qr-code-item " v-for="item in list" :key="item.id">
        <div class="qrCode-msg">
          <span>车辆管理号:</span>
          <span>{{ item.no }}</span>
          <span>车辆管理部门:</span>
          <span>{{ item.dept }}</span>
          <span>车辆管理者:</span>
          <span>{{ item.name }}</span>
        </div>
        <QrCode :value="item.qrcode" :width="160"/>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import { QrCode } from '/@/components/Qrcode/index';
  import printJS from 'print-js';
  const showQrCodeList = ref<boolean>(false);
  const list = [
    { id:0,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:1,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:2,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:3,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:4,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:5,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:6,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:7,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:8,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:9,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    },
    { id:10,
      no:"095B-E101",
      dept:"试制课",
      name:"范晓宇",
      qrcode:"111",
    }
  ]
  function jsonPrint() {
    showQrCodeList.value = true;
    nextTick(()=>{
      const style = '@page { } ' + '@media print { .qr-code-list{display: grid;grid-template-columns: repeat(2, 1fr);gap:30px;}.qr-code-item{ display:flex;justify-content: space-between;align-items: center;width:350px; padding:8px;padding-left:25px;border:2px solid rgb(56, 93, 138);} .qrCode-msg{display: flex;flex-direction: column;} }' ;
      printJS({
        printable: "qrCodeList",
        type: 'html',
        // css: "./css/print.css",
        style,
        // onPrintDialogClose:()=>{
        //   showQrCodeList.value = false;
        // }
      });
    })
  }
</script>
<style scoped lang="less">
  /* @import url(); 引入css类 */
  .qr-code-list{
    position: fixed;
    top:3000px;
    display: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap:30px;
  }
  .qr-code-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:350px;
    padding:8px;
    padding-left:15px;
    border:2px solid rgb(56, 93, 138);
  }
  .qrCode-msg{
    display: flex;
    flex-direction: column;
  }
</style>
